---
type: tutorial
unitTitle: Erstelle und veröffentliche deine erste Astro-Website
title: 'Wissenscheck: Lektion 1 – Einrichtung'
description: >-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Richte deine Entwicklungsumgebung ein und erstelle und veröffentliche deine erste Astro-Website
i18nReady: true
head:
  - tag: title
    content: 'Blog-Tutorial: Lektion 1 – Einrichtung | Docs'
---

import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';

Jetzt, da du weißt, was du bauen wirst, ist es an der Zeit, alle benötigten Tools einzurichten!  

In dieser Lektion lernst du, wie du deine Entwicklungsumgebung einrichtest und deine Seite auf Netlify veröffentlichst. Überspringe diese Lektion und fahre mit [Lektion 2](/de/tutorial/2-pages/) fort, wenn du dich mit deiner Umgebung und deinem Workflow bereits wohlfühlst.

:::tip[Mache das Tutorial in einem Online-Code-Editor]

Möchtest du dieses Tutorial lieber in einem Online-Code-Editor absolvieren? Befolge die folgenden Anweisungen, um mit Google IDX zu starten.

<details>
<summary>Mit Google IDX: Befolge diese Schritte und gehe dann direkt zu Lektion 2!</summary>

**IDX einrichten**

<Steps>
1. Folge dem externen Link, um [die „Empty Project“-Vorlage in einem neuen Workspace auf IDX zu öffnen](https://astro.new/minimal?on=idx).

2. Folge der Aufforderung, dich in dein Google-Konto einzuloggen, falls du noch nicht angemeldet bist.

3. Gib deinem Projekt einen Namen, wenn du es anders als „Empty Project“ nennen möchtest. Klicke **Create**.

4. Warte, bis der Workspace erstellt wurde. Das kann 30–60 Sekunden dauern. Wenn alles klappt, siehst du dein Astro-Projekt in einem Online-Code-Editor geladen.

5. Warte, bis IDX zwei Skripte ausführt: eines zur Installation von Astro und eines zum Starten des Entwicklungsservers. Es kann kurzzeitig die Meldung erscheinen, dass dein Workspace „Astro nicht finden konnte“. Diese Meldung kann ignoriert oder geschlossen werden, falls sie sich nicht von selbst schließt.
</Steps>

**Änderung vornehmen**

Wenn alles funktioniert hat, solltest du den Code der Datei `src/pages/index.astro` geöffnet sehen, in geteilter Ansicht mit einer Live-Vorschau der Website. Folge der Anleitung unter [„Schreibe deine erste Zeile Astro“](/de/tutorial/1-setup/3/), um diese Datei zu ändern.

**GitHub-Repository erstellen**

<Steps>
1. Öffne den Navigationspunkt „Source Control“ in der vertikalen Menüleiste oder mit <kbd>Strg + Umschalttaste + G</kbd>. 

2. Wähle die Option, das Projekt auf GitHub zu veröffentlichen. Dadurch wird ein neues Repository in deinem GitHub-Konto erstellt.
3. Folge den Anweisungen, um dich bei deinem GitHub-Konto anzumelden.
4. Nach der Anmeldung kannst du in IDX den Namen deines neuen Repositories wählen und festlegen, ob es privat oder öffentlich sein soll. Für dieses Tutorial kannst du beides wählen.
5. IDX führt einen ersten Commit aus und veröffentlicht das Projekt in deinem neuen GitHub-Repository.
6. Wenn du zukünftig Änderungen hast, die zurück an GitHub übertragen werden sollen, zeigt das Symbol für „Source Control“ eine Zahl an – die Anzahl der Dateien, die sich seit dem letzten Commit geändert haben. Öffne diesen Tab, führe die beiden Schritte „Commit“ und „Publish“ aus, gib eine Commit-Nachricht ein und aktualisiere dein Repository.
</Steps>

**Website veröffentlichen**

Wenn du deine Seite auf Netlify veröffentlichen möchtest, um eine live veröffentlichte Version deiner Website zu haben, fahre in Lektion 1 mit [„Deine Website im Web veröffentlichen“](/de/tutorial/1-setup/5/) fort.

Andernfalls kannst du diese Lektion überspringen und mit [Lektion 2](/de/tutorial/2-pages/) weitermachen, um mit Astro zu bauen!

</details>

{/* StackBlitz instructions 
<details>
<summary>Mit StackBlitz: Befolge diese Schritte und gehe dann direkt zu Lektion 2!</summary>

**StackBlitz einrichten**

<Steps>
1. Folge dem externen Link, um [die „Empty Project“-Vorlage auf StackBlitz zu öffnen](https://astro.new/minimal?on=stackblitz).

2. Klicke oben rechts auf „Sign in“, um dich mit deinen GitHub-Zugangsdaten anzumelden.

3. Klicke oben links im StackBlitz-Editor auf „fork“, um die Vorlage in deinem eigenen Konto zu speichern.

4. Warte, bis das Projekt geladen ist. Du solltest eine Live-Vorschau des „Empty Project“-Starters sehen.
</Steps>

**Änderung vornehmen**

Im Datei-Bereich solltest du `src/pages/index.astro` sehen. Klicke darauf und folge [„Schreibe deine erste Zeile Astro“](/de/tutorial/1-setup/3/), um diese Datei zu ändern.

**GitHub-Repository erstellen**

<Steps>
1. Klicke oben in der Dateiliste auf <kbd>Connect Repository</kbd>, gib einen neuen Namen für dein Repository ein und klicke auf <kbd>Create repo & push</kbd>. 

2. Wenn du Änderungen hast, die du zurück an GitHub übertragen möchtest, erscheint oben links ein „Commit“-Button. Klicke darauf, gib eine Commit-Nachricht ein und aktualisiere dein Repository.
</Steps>

**Website deployen**

Wenn du zu Netlify deployen möchtest, um eine live veröffentlichte Version deiner Website zu haben, fahre in Lektion 1 mit [„Deine Website ins Web deployen“](/de/tutorial/1-setup/5/) fort.

Andernfalls überspringe diese Lektion und beginne mit [Lektion 2](/de/tutorial/2-pages/), um mit Astro zu bauen!

</details>
*/}
:::

## Wohin geht die Reise?

In dieser Lektion wirst du **ein neues Projekt erstellen**, das **online in GitHub gespeichert** und **mit Netlify verbunden** ist.  

Während du Code schreibst, wirst du regelmäßig deine Änderungen nach GitHub committen. Netlify verwendet die Dateien aus deinem GitHub-Repository, um deine Website zu erstellen und sie anschließend im Internet unter einer eindeutigen Adresse zu veröffentlichen, die jeder aufrufen kann.

Jedes Mal, wenn du eine Änderung committest und auf GitHub hochlädtst, sendet GitHub eine Benachrichtigung an Netlify. Dann wird Netlify automatisch deine Live-Website neu erzeugen und erneut veröffentlichen, um diese Änderungen zu übernehmen.

<Box icon="check-list">
## Checkliste

<Checklist>
- [ ] Ich bin bereit, eine Entwicklungsumgebung für ein Astro-Projekt einzurichten!
</Checklist>
</Box>
